[#assign title]二维码[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style></style>
[/#macro]
[#macro body]
<div class="row align-items-center flex-column">
    <div class="col-6 pb-3">
        <img class="img-thumbnail mx-auto d-block" :src="showQrcodeImg"/>
    </div>
    <div class="col-6">
        <label class="btn btn-lg btn-primary btn-block" for="uploadFile">上传二维码</label>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <ul>
            <li>点击『<span class="text-danger">上传二维码</span>』按钮，
                选择相册保存的二维码图片可<span class="text-danger">上传新</span>二维码，
                或<span class="text-danger">替换旧</span>二维码
            </li>
            <li>二维码获取方式：
                <dl>
                    <dd>进入微信</dd>
                    <dd>点击右上角『<span class="text-danger">╋</span>』号</dd>
                    <dd>点击『<span class="text-danger">收付款</span>』</dd>
                    <dd>验证身份后点击下方『<span class="text-danger">二维码收款</span>』</dd>
                    <dd>然后点击『<span class="text-danger">保存收款码</span>』即可保存到手机相册</dd>
                </dl>
            </li>
            <li>若多次上传失败，请联系客服帮助上传</li>
        </ul>
    </div>
</div>
<div hidden>
    <input id="uploadFile" type="file" accept="image/*" @change="upload"/>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            qrcode: ''
        },
        methods: {
            refresh: function () {
                var vm = this;
                axios.post('/customer/qrcode/download').then(function (response) {
                    var data = response.data;
                    if (!data.success) {
                        return;
                    }
                    vm.qrcode = data.data;
                });

            },
            upload: function (evt) {
                var vm = this;
                var imageInput = evt.target;
                var file = imageInput.files[0];
                imageInput.value = null;
                if (file.size > 1024 * 1024) {
                    return vm.$toast('图片过大,无法上传');
                }
                if (!/\/(?:jpeg|png|gif)/i.test(file.type)) {
                    return vm.$toast('文件格式不支持,请重新选择');
                }
                // 本地预览
                // var img = document.querySelector('img');
                // img.src = (window.webkitURL || window.URL).createObjectURL(file);
                vm.$indicator.open({
                    text: '上传中...',
                    spinnerType: 'fading-circle'
                });

                var formData = new FormData();
                formData.append('file', file);

                axios.post('/customer/qrcode/upload', formData).then(function (res) {
                    vm.$indicator.close();
                    var data = res.data;
                    if (data.success) {
                        vm.$toast('上传成功');
                        vm.refresh();
                        return;
                    }
                    vm.$toast(data.message || '上传失败,请稍候重试');
                }).catch(function (err) {
                    vm.$indicator.close();
                });
            }
        },
        computed: {
            showQrcodeImg: function () {
                var url = this.qrcode;
                return url ? 'data:image/png;base64,' + url : '/static/images/customer/qrcode-un-upload.png';
            }
        },
        mounted: function () {
            var vm = this;
            vm.refresh();
        }
    });
</script>
[/#macro]